<%@ include file="/WEB-INF/common/taglibs.jsp"%>
<%@ taglib prefix="codec" uri="/WEB-INF/tld/codec.tld" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>24K Cms Admin</title>

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Le styles -->
    <link href="${supr}/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="${supr}/css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
    <link href="${supr}/css/supr-theme/jquery.ui.supr.css" rel="stylesheet" type="text/css"/>
    <link href="${supr}/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="${supr}/plugins/forms/uniform/uniform.default.css" type="text/css" rel="stylesheet" />
	<link rel="icon" type="image/ico" href="${ctx}/favicon.ico"/>
    <!-- Main stylesheets -->
    <link href="${supr}/css/main.css" rel="stylesheet" type="text/css" /> 
    
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="${supr}/images/apple-touch-icon-144-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${supr}/images/apple-touch-icon-114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${supr}/images/apple-touch-icon-72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" href="${supr}/images/apple-touch-icon-57-precomposed.png" />

    </head>
      
    <body class="loginPage">

    <div class="container-fluid">
 
        <div id="header">

            <div class="row-fluid">

                <div class="navbar">
                    <div class="navbar-inner">
                      <div class="container">
                            <a class="brand" href="#">24K Cms.Admin <span class="slogan">Get Yourself Best Experience</span></a>
                      </div>
                    </div><!-- /navbar-inner -->
                  </div><!-- /navbar -->
                

            </div><!-- End .row-fluid -->

        </div><!-- End #header -->

    </div><!-- End .container-fluid -->    

    <div class="container-fluid">

        <div class="loginContainer">
                <c:choose>
       
        <c:when test="${param.code!=null}">
                <div class="alert alert-block alert-error fade in">
                                <button type="button" class="close" data-dismiss="alert"></button>
                                <h4 class="alert-heading">Oh snap! You got an error!</h4>
                                <p id="alert">${codec:getErrorDesc(param.code)} </p>
				</div>        
        </c:when>
        
        
        
        </c:choose>
        
            <form class="form-horizontal" action="${ctx}/login" method="post" id="loginForm" >
                <div class="form-row row-fluid">
                    <div class="span12">
                        <div class="row-fluid">
                            <label class="form-label span12" for="username">
                                Username:
                                <span class="icon16 icomoon-icon-user-3 right gray marginR10"></span>
                            </label>
                            <input class="span12" id="j_username" type="text" name="username" />
                        </div>
                    </div>
                </div>

                <div class="form-row row-fluid">
                    <div class="span12">
                        <div class="row-fluid">
                            <label class="form-label span12" for="password">
                                Password:
                                <span class="icon16 icomoon-icon-locked right gray marginR10"></span>
                                <span class="forgot"><a href="#">Forgot your password?</a></span>
                            </label>
                            <input class="span12" id="password" type="password" name="password" />
                        </div>
                    </div>
                </div>
                <div class="form-row row-fluid">		
                    <div class="span12">
                        <div class="row-fluid">
                            <label class="form-label span12" for="password">
                                Validate code :
                                <span class="icon16 icomoon-icon-key right gray marginR10"></span>
                            </label>
                            <input class="span12" id="captchaText" type="text" name="captcha" value=""  autocomplete="off"/>
   							<img id="captcha" src="${ctx}/captcha/" style="cursor:pointer;" />
                        </div>
                  </div>
               </div> 
                <div class="form-row row-fluid">                       
                    <div class="span12">
                        <div class="row-fluid">
                            <div class="form-actions">
                            <div class="span12 controls">
                                <input type="checkbox" id="keepLoged" value="Value" class="styled" name="logged" /> Keep me logged in
                                <button type="submit" class="btn btn-info right" id="loginBtn"><span class="icon16 icomoon-icon-enter white"></span> Login</button>
                            </div>
                            </div>
                        </div>
                    </div> 
                </div>

            </form>
        </div>

    </div><!-- End .container-fluid -->

    <script type="text/javascript" src="${supr}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${supr}/js/bootstrap/bootstrap.js"></script>  
    <script type="text/javascript" src="${supr}/plugins/misc/touch-punch/jquery.ui.touch-punch.min.html"></script>
    <script type="text/javascript" src="${supr}/plugins/misc/ios-fix/ios-orientationchange-fix.html"></script>
    <script type="text/javascript" src="${supr}/plugins/forms/validate/jquery.validate.min.js"></script>
    <script type="text/javascript" src="${supr}/plugins/forms/uniform/jquery.uniform.min.js"></script>

     <script type="text/javascript">
        // document ready function
        $(document).ready(function() {
        	 
            $("input, textarea, select").not('.nostyle').uniform();
            $("#loginForm").validate({
                rules: {
                    j_username: { 
                        required: true,
                        minlength: 4
                    },
                    j_password: {
                        required: true,
                        minlength: 4
                    }  
                },
                messages: {
                    j_username: {
                        required: "Fill me please",
                        minlength: "My name is bigger"
                    },
                    j_password: {
                        required: "Please provide a password",
                        minlength: "My password is more that 4 chars"
                    }
                }   
            });
        	$("#captcha").click(function(){
        		var captchaUrl = "${ctx}/captcha/?" + Math.random().toString();
        		console.dir(captchaUrl);
        		$(this).attr("src", captchaUrl);
        	 	$("#captchaText").focus();
        	});
        });
    </script>
    </body>
</html>
